import React, { Component } from 'react'
import { Icon, Button } from 'antd'

export default class TradePage extends Component {
  render() {
    return (
      <div className={`rt-trade-box`}>
        <img className={`rt-non-auth`} src="../../statics/images/rz_sw.png" />

        <div className={`rt-top-box`}>
          <div className={`rt-avatar-box`}>
            <div className={`rt-avatar`}></div>
          </div>
          <div className={`rt-nickname`}>vp2016</div>
        </div>

        <div className={`rt-btn-group`}>
          <Button>
            <Icon type="question" />
            充值
          </Button>

          <Button>
            <Icon type="question" />
            提现
          </Button>
        </div>

        <div className={`rt-notice-box`}>
          <div className={`rt-tag`}>公告</div>
          <div>关于开通借记卡支付通道的通知</div>
        </div>

        <div className={`rt-goods-box`}>
          <div className={`rt-active`}>工业银</div>
          <div>工业油</div>
          <div>工业铜</div>
        </div>

        <div className={`rt-concrete-goods`}>
          <div className={`rt-goods-price-box`}>
            <div>工业银（元/千克）</div>
            <div className={`rt-price`}>
              3503<Icon type="up" />
            </div>
          </div>

          <div className={`rt-market-box`}>
            <div>
              <div>最高：3520</div>
              <div>昨收：3491</div>
            </div>

            <div className={`rt-placeholder`}></div>

            <div>
              <div>最低：3479</div>
              <div>开盘：3499</div>
            </div>
          </div>
        </div>

        <div className={`rt-line-category`}>
          <div>分时线</div>
          <div>5分钟线</div>
          <div>30分钟线</div>
          <div>1小时线</div>
          <div className={`rt-active`}>日线</div>
        </div>

        <div className={`rt-chart-box`}>chart todo</div>

        <div className={`rt-available-fund`}>
          <div>可用资金</div>
          <div>2000.00元</div>
        </div>

        <div className={`rt-op-btn-grp`}>
          <Button>
            <Icon type="question" />买涨
          </Button>

          <Button>
            <Icon type="question" />买跌
          </Button>
        </div>

        <div className={`rt-auth-text`}>
          您的账户尚未实名认证，无法交易
        </div>

        <div className={`rt-btn-auth`}>
          <Button>立即实名认证</Button>
        </div>

        <div className={`rt-footer-bar`}>
          <div>
            <Icon type="question" />
            <div>微盘</div>
          </div>
          <div className={`rt-active`}>
            <Icon type="question" />
            <div>中盘</div>
          </div>
          <div>
            <Icon type="question" />
            <div>账户</div>
          </div>
          <div>
            <Icon type="question" />
            <div>财经</div>
          </div>
          <div>
            <Icon type="question" />
            <div>排行</div>
          </div>
        </div>
      </div>
    )
  }
}